:root {
  --bg: #ffffff;
  --text: #000000;
  --card: #ffffff;
  --border: #e5e5e5;
  --muted: #666666;
  --icon-filter: none;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --text: #ffffff;
    --card: #111111;
    --border: #333333;
    --muted: #aaaaaa;
    --icon-filter: invert(1) brightness(0.9);
  }
}

[data-theme="dark"] {
  --bg: #000000;
  --text: #ffffff;
  --card: #111111;
  --border: #333333;
  --muted: #aaaaaa;
  --icon-filter: invert(1) brightness(0.9);
}

.theme-icon {
  filter: var(--icon-filter);
}

.surface {
  background: var(--bg);
  color: var(--text);
}

.card {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
}
